﻿
@{
    ViewBag.Title = "歌单列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <style>
        .display{
            margin-top:1%;
            padding:0 20%;
            width:60%;
            min-height:99%;
        }
        .left{
            float:left;
            width:65%;
        }
        .right {
            float: right;
            width: 32%;
            padding-top:230px;
        }
        .lefttop{
            height:230px;
        }
        .leftimg{
            width:30%;
            float:left;
        }
        .leftimg img{
            width:100%;
            height:95%;
        }
        .leftdesc{
            width:63%;
            float:right;
            line-height:26px;
            font-size:14px;
        }
        .on {
            background-color: #fbfbfd;
        }
        .header{
            width:100%;
            height:50px;
            line-height:50px;
            background-color: #f8f8f8;
            color: #999;
            font-size:15px;
        }
    </style>

    <div id="app">
        <div class="display">
            <div class="left">
                <div class="lefttop">
                    <div class="leftimg">
                        <img src="~/Content/musicImg/1.jpg" />
                    </div>
                    <div class="leftdesc">
                        <div style="height:18%;"></div>
                        <div style="height:20%;"><b style="font-size:24px;"> 天赐的声音 | 音色为王 举世无双</b> </div>
                        <div style="height:16%;">标签： 安静 睡眠</div>
                        <div style="height:12%;"> 点击量：1000</div>
                        <div style="height:12%;">购买量 ： 1000</div>
                        <div style="height:22%;"><el-button type="primary">全部加入</el-button></div>


                    </div>
                </div>
                <div class="musiclist">
                    <el-row class="header">
                        <el-col :span="2" style="text-align:center">&nbsp;</el-col>
                        <el-col :span="7">歌名</el-col>
                        <el-col :span="7">歌手</el-col>
                        <el-col :span="3">时长</el-col>
                        <el-col :span="5">操作</el-col>
                    </el-row>
                    <el-row v-for="(item,index) in tableData" style="width:100%;height:40px;line-height:40px;font-size:13px;" :class="{on:index%2!=0}">
                        <el-col :span="2" style="text-align:center">{{index+1}}</el-col>
                        <el-col :span="7">{{item.musciName}}</el-col>
                        <el-col :span="7">{{item.musicPeo}}</el-col>
                        <el-col :span="3">{{item.musicTime}}</el-col>
                        <el-col :span="5">
                            <el-button type="text" size="small">试听</el-button>
                            <el-button type="text" size="small">加入购物车</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="right">
                <b style="font-size:18px;line-height:40px;">简介</b> <br />
                <p style="font-size:15px;">睡前小故事： 很喜欢一个人是怎样的感觉呢？小兔子很想知道。松鼠太太剥开一颗松子，把果仁塞进嘴里说：“每一次我感觉自己有一点点喜欢他，我就往自己的嘴里塞一个果仁。” </p>
            </div>
        </div>
      
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                  tableData: [],
                }
            },
            mounted() {
             
            },
            methods: {
              
            }
        })
    </script>
